<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q7XlLctUWrzKgK2XVjlkWwVxvFXKMZKj"></script>
        <style type="text/css">
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
            .tangram-suggestion-main {
                z-index: 999999;
            }
            #l-map{height:400px;width:100%;z-index: 100}
            #r-result{width:100%;}
            #suggestId{
                border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
            }
            input:focus{
                border-color: #66afe9;
                outline: 0;
                x-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
            }
        </style>
    </head>
    <body class="hold-transition" >
    <div id="app" >
        <div class="content-header" >
            <h1>首页
                <small>公司分布图</small>
            </h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>工作台</el-breadcrumb-item>
                <el-breadcrumb-item>地址管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <div class="app-container"  >
            <div class="box" style="height: 700px">
                <div class="excelTitle">
                    <el-button @click="__findAddress()" type="primary" >分布图</el-button>
                    <el-button  @click="_findPageList()" type="primary"  >详细信息</el-button>
                </div>
                <dl></dl>

                <div v-show="addressVisible" id="allmap"></div>
                <div v-show="addressListVisible" class="filter-container"  id="addressList">
                    <el-input placeholder="公司地址" v-model="pagination.queryString" style="width: 200px;"
                              class="filter-item"></el-input>
                    <el-button @click="_findPage()" class="dalfBut">查询</el-button>
                    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
                        <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
                        <el-table-column prop="latitude" label="所在纬度" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <!-- <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>-->
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                class="pagiantion"
                                @current-change="handleCurrentChange"
                                :current-page="pagination.currentPage"
                                :page-size="pagination.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="pagination.total">
                        </el-pagination>
                    </div>

                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增公司地址"  :visible.sync="dialogFormVisible"  >
                            <div id="r-result" >
                                <input type="text" id="suggestId" size="30"  value="百度" style="height:20px;width:600px;" />
                                <el-button type="primary" @click="addAddress()" >确定添加</el-button>
                                <input  type="text" id="lat" style="display: none"/>
                                <input type="text" id="lng"  style="display: none"/>
                                <input type="text" id="address" style="display: none">
                            </div>
                            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;display: none"></div>
                            <dl></dl>
                            <div id="l-map"></div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript">
        //百度地图API功能
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "//api.map.baidu.com/api?v=2.0&ak=neE6gnfWlRpLbhWtG3T2evCKnDZZgVta&callback=init1";
            document.body.appendChild(script);
        }

        function init1(){
            function G(id) {
                return document.getElementById(id);
            }

            var map3 = new BMap.Map("l-map");
            map3.centerAndZoom("北京", 12);                   // 初始化地图,设置城市和地图级别。

            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {
                    "input": "suggestId"
                    , "location": map3
                })


            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                document.getElementById("address").value = myValue;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                setPlace();
            });

            function setPlace() {
                map3.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    document.getElementById("lat").value = pp.lat;
                    document.getElementById("lng").value = pp.lng;
                    map3.centerAndZoom(pp, 18);
                    map3.addOverlay(new BMap.Marker(pp));    //添加标注
                }

                var local = new BMap.LocalSearch(map3, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
        }
    </script>
    <script type="text/javascript">

        //百度地图API功能
        function loadJScript1() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "//api.map.baidu.com/api?v=2.0&ak=neE6gnfWlRpLbhWtG3T2evCKnDZZgVta&callback=init";
            document.body.appendChild(script);

        }

        function init() {
            var map = new BMap.Map("allmap");            // 创建Map实例

            // 添加定位控件
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener("locationSuccess", function (e) {
                // 定位成功事件
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;
                address += e.addressComponent.streetNumber;
                alert("当前定位地址为：" + address);
            });
            geolocationControl.addEventListener("locationError", function (e) {
                // 定位失败事件
                alert(e.message);
            });
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
            });

            //经度 longitude;
            //纬度 latitude;
            axios.post("/address/findAll.do").then(data => {

                var point = "北京"; // 创建点坐标

                for (var i = 0; i < data.data.data.length; i++) {
                    var marker = new BMap.Marker(new BMap.Point(data.data.data[i].longitude, data.data.data[i].latitude));  // 创建标注
                    var content = data.data.data[i].address + "   :经度:" + data.data.data[i].longitude + " 纬度:" + data.data.data[i].latitude;
                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(content, marker);
                    var label = new BMap.Label(data.data.data[i].address, {offset: new BMap.Size(20, -10)});
                    marker.setLabel(label);
                    point = new BMap.Point(data.data.data[0].longitude, data.data.data[0].latitude); // 创建点坐标
                }
                map.addControl(geolocationControl);
                map.addControl(navigationControl);
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom();                 //启用滚轮放大缩小
            });


            var opts = {
                width: 250,     // 信息窗口宽度
                height: 80,     // 信息窗口高度
                title: "信息窗口", // 信息窗口标题
                enableMessage: true//设置允许信息窗发送短息
            };

            function addClickHandler(content, marker) {
                marker.addEventListener("click", function (e) {
                        openInfo(content, e)
                    }
                );
            }

            function openInfo(content, e) {
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            }
        }
        window.onload = loadJScript1;  //异步加载地图
    </script>
</html>